<!--
 * @Author: chenzechao
 * @Date: 2024-01-29 11:02:35
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-02-04 08:52:04
 * @FilePath: \accesscontrolui\src\views\xtpz\holiday\components\import-dialog.vue
 * @Description:
-->
<template>
  <el-dialog
      @close="handleDialogClose"
    title="导入"
    :close-on-click-modal="false"
    :visible="importVisible"
    width="600px"
  >
    <el-form ref="form" :model="form">

      <el-row>
        <el-form-item label="导入文件">
          <el-upload
              class="upload-demo"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              accept=".xls,.xlsx"
              :auto-upload="false"
              :on-change="(event)=>{handleChange(event)}"
          >
            <el-button icon="el-icon-paperclip" slot="trigger" size="small" type="">
              {{this.i18n.t('Upload File')}}
            </el-button>
            <div slot="tip" class="el-upload__tip">
              支持文件格式：xls、xlsx <span @click="downloadTemplate" class="dwonload-tem" v-loading="downLoading">下载导入模版</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-row>
    </el-form>
<!--    <main>-->
<!--      <section class="left-title">导入文件</section>-->
<!--      <br>-->
<!--      <section class="right-content">-->
<!--       -->
<!--      </section>-->
<!--    </main>-->
    <footer style="text-align: center">
      <el-button size="small" @click="handleDialogClose">取消</el-button>
      <!-- <el-button size="small" type="primary" @click="hanldeConfirm">确定</el-button> -->
<!--      导入按钮-->
      <el-button style="margin-left: 10px;" :loading="importExcelLoading" v-if="excelFilePath" size="small" type="primary"
                 @click="submitExcel">{{this.i18n.t('import')}}
      </el-button>
    </footer>
  </el-dialog>
</template>
<script>
import {
  holidaysGetimportholidaystoexcelteamplate,
  holidaysImportHolidaysInfo,
} from "@/api/pcmj/jjr";

export default {
  data() {
    return {
      importExcelLoading: false,
      importExcelFlag: false,
      downLoading: false,
      dialogVisible: false,
      excelFilePath: "",
      fileList:[],
      form: {
        name: "",
      },
    };
  },
  props: {
    importVisible: {
      type: Boolean,
      default: false
    },
    handleType: {
      type: String,
      default: "add",
    },
    tableRow:{
      type: Object,
      default: ()=>{
        return {}
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    holidaysImportHolidaysInfo(filePath){
      this.importExcelLoading=true
      holidaysImportHolidaysInfo(filePath).then(res=>{
        if (res.code == 200) {

          // 更新页面数据
          this.$parent.getList()
          this.$parent.importVisible=false
          this.W.$tips("success", this.i18n.t('Import was successful'));
        }
      }).catch().finally(()=>{
        this.importExcelLoading=false
      })
    },
    submitExcel(){
      this.holidaysImportHolidaysInfo(this.excelFilePath)
    },
    handleChange(file) {
      console.log(file);
      var fileList = this.$refs.upload.$refs["upload-inner"].fileList
      console.log(fileList);

      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }

      var suffix = this.getSuffix(file.name)
      console.log(396, suffix);
      if (suffix != 'xls' && suffix != 'xlsx') {
        this.W.$tips("warning", this.i18n.t("Please select an Excel file"));
        return
      }
      if (!this.isElectron) {
        // 请在桌面端操作
        this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
      } else {
        this.excelFilePath = file.raw.path
        console.log('文件路径', file.raw.path);
      }
      console.log(file);
    },
    // 提取文件后缀名
    getSuffix(str) {
      const fileExtension = str.substring(str.lastIndexOf('.') + 1);
      return fileExtension;
    },
    // 下载模板文件
    holidaysGetimportholidaystoexcelteamplate(){
      this.downLoading=true
      holidaysGetimportholidaystoexcelteamplate().then(res=>{
        // 人员信息导入模板
        this.G.exportFile(res, "节假日导入模板" + new Date().toLocaleString())
      }).catch().finally(()=>{
        this.downLoading=false
      })
    },
    downloadTemplate(){
      this.holidaysGetimportholidaystoexcelteamplate()
    },
    handleDialogClose() {
      this.$parent.importVisible=false
    },
    open() {
      this.dialogVisible = true;
    },
    hanldeConfirm() {},
    handleRemove() {
      this.excelFilePath = ""
    },
    handlePreview() {},
  },
};
</script>
<style scoped lang="scss">
  .el-icon-warning {
    color: rgba(255, 141, 26, 1);
    font-size: 34px;
    margin-right: 8px;
  }
  main {
    margin: 30px 0px 35px;
    display: flex;
    justify-content: center;
      align-items: baseline;
      .left-title{
        margin-right: 8px;
      }
      // .dwonload-tem{
      //   color: blue;
      //   // color: rgba(6, 102, 210, 1);
      //   cursor: pointer;
      //   background: #000;
      // }
  }

  .el-row .el-form-item__content {
    display: inline-block;

    .dwonload-tem{
      color: blue;
      // color: rgba(6, 102, 210, 1);
      cursor: pointer;
    }
    .el-button--small {
      background: linear-gradient(rgba(250, 252, 255, 1), rgba(202, 222, 252, 1));
    }
    .upload-demo {
      margin-top: -35px;
      margin-left: 70px;
    }
  }
</style>
